<template>
  <div class="wrap">
    <div class="img_wrap">
      <div class="bg_img">
        <img alt="bg" :src="bgImg" />
      </div>
      <div class="avatar">
        <img alt="avatar" :src="avatar" />
      </div>
    </div>
    <div class="bot_wrap">
      <div class="name">{{ name }}</div>
      <div
        class="row flex items-center"
        v-for="(item, index) in botArr"
        :key="item.text"
        @click="handleClickBot(index, item.text)"
      >
        <div class="icon_wrap">
          <img alt="bg" :src="item.icon" />
        </div>
        <div class="text">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import useData from "./index.js";
import emailIcon from "@/assets/email.png";
import insIcon from "@/assets/instagram.png";
import phoneIcon from "@/assets/phone.png";
import addressIcon from "@/assets/address.png";
import whatsupIcon from "@/assets/whatsup.png";
const { bgImg, avatar, name, address, email, phone, whatsup, ins } = useData();
function handleClickBot(index, text) {
  switch (index) {
    case 0:
      // geo:
      break;
    case 1:
      window.location.href = `tel: ${text}`;
      break;
    case 2:
      window.location.href = `https://wa.me/${text}`;
      break;
    case 3:
      window.location.href = `mailto:${text}`;
      break;
    case 4:
      window.location.href = `instagram://user?username=${text}`;
      break;
  }
}
const botArr = [
  {
    icon: addressIcon,
    text: address
  },
  {
    icon: phoneIcon,
    text: phone
  },
  {
    icon: whatsupIcon,
    text: whatsup
  },
  {
    icon: emailIcon,
    text: email
  },
  {
    icon: insIcon,
    text: ins
  }
];
</script>

<style lang="less" scoped>
@bgH: 58vh;
@restH: calc(100vh - @bgH - 1vh);
.wrap {
  position: relative;
  background: black;
  max-width: 100vw;
  min-width: 100vw;
  min-height: 100vh;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  .img_wrap {
    position: relative;
    max-height: @bgH;
    .bg_img {
      position: relative;
      background: transparent;
      max-height: @bgH;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%, 0 0);
      img {
        object-fit: cover;
      }
    }
    .avatar {
      position: relative;
      top: -120px;
      left: 20px;
      img {
        width: 125px;
        height: 125px;
        border-radius: 50%;
        object-fit: cover;
      }
    }
  }
  .bot_wrap {
    color: white;
    font-size: 16px;
    padding: 30px 20px;
    height: @restH;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow-y: scroll;
    .name {
      font-size: 20px;
    }
    .row {
      margin-top: 10px;
      display: flex;
      align-items: center;
      .icon_wrap {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 70%;
          height: 70%;
        }
      }
      .text {
        margin-left: 10px;
      }
    }
  }
}
</style>
